<template>
  <div class="dise">
    <div class="banse" :style="{ width: banse + '%' }">
      <span v-show="banse !== 0">{{ banse }}%</span>
    </div>
  </div>
  <button @click="banse = 0">进度0%</button>
  <button @click="banse = 20">进度加20%</button>
  <button @click="banse = 40">进度加40%</button>
  <button @click="banse = 60">进度加60%</button>
  <button @click="banse = 80">进度加80%</button>
  <button @click="banse = 100">进度加100%</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
let banse = ref(0);
</script>

<style lang="scss" scoped>
.dise {
  width: 500px;
  height: 20px;
  background-color: black;
  border-radius: 20px;
  margin-bottom: 25px;
  .banse {
    width: 20%;
    height: 100%;
    background-color: skyblue;
    border-radius: 20px;
    transition: all 1s;
    span {
      float: right;
      margin-top: 20px;
    }
  }
}
</style>
